<template>
  <div class="app-container">
    <el-card>
      <el-tabs @tab-click="handleClick">
        <!-- 角色管理 start -->
        <el-tab-pane label="角色管理">
          <el-row class="add-btn">
            <el-button type="primary" size="small" @click="handlerAdd"
            v-power="'addPermission'"  >新增角色</el-button
            >
          </el-row>
          <l-table :tableData="tableData" :column="column" index border>
            <!-- 操作项 start -->
            <template v-slot:options="{ scope }">
              <el-button
                size="mini"
                type="success"
                @click="handlerAssignPermission(scope)"
               v-power="'assginPermission'">分配权限</el-button
              >
              <el-button size="mini" type="primary" @click="handleEdit(scope)"
                v-power="'editPermission'"  >编辑</el-button
              >
              <el-button size="mini" type="danger" @click="handleDelete(scope)"
               v-power="'delPermission'" >删除</el-button
              >
            </template>

            <!-- 操作项 end -->
          </l-table>
          <!-- 分页器 start -->
          <Pagination
            :total="total"
            bg
            class="page"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
          <!-- 分页器 end -->
        </el-tab-pane>
        <!-- 角色管理 end -->

        <!-- 公司信息 start -->
        <el-tab-pane label="公司信息">
          <CompanyDetail :company="companyInfo" />
        </el-tab-pane>
      </el-tabs>
      <!-- 公司信息 end -->
      <!-- 角色dialog -->
    </el-card>
    <role-form
      @submit="handlerSubmit"
      :showDialog.sync="showRoleDialog"
      :title="title"
      ref="roleFormRef"
    />
    <!-- 权限弹窗 -->
    <assgin-permission
      :showDialog.sync="showAssign"
      @confirm="handlerSubmitPer"
      :permission="permission"
      :selectCheck="selectCheck"
      ref="perRef"
    />
  </div>
</template>

<script>
import {
  getAllRoleAPI,
  deleteRoleAPI,
  updateRoleAPI,
  getRoleDetailsAPI,
  createRoleAPI,
  assignPermissionsAPI,
} from "@/api/settings";
import { getCompanyDetailsAPI } from "@/api/company";
import { getAllPermissionAPI } from "@/api/permissions";
import { mapGetters } from "vuex";
import msgTip from "@/utils/message-tip";
import tranTree from "@/utils/format-to-tree";
import CompanyDetail from "./components/CompanyDetails.vue";
import RoleForm from "./components/role-form.vue";
import AssginPermission from "./components/assgin-permission.vue";

export default {
  data() {
    return {
      column: Object.freeze([
        { prop: "name", label: "名称" },
        { prop: "description", label: "描述" },
        { label: "操作", slot: "options" },
      ]), //对象冻结-该属性不需要响应式
      tableData: [], //角色信息列表
      total: 0, //角色总数
      companyInfo: {}, //公司信息
      showRoleDialog: false, //角色dialog 显示隐藏标识,
      showAssign: false, //权限弹窗
      query: {
        page: 1, //页面
        pagesize: 10, //条数
      },
      title: "",
      permission: [],
      selectCheck: [],
      roleId:''
    };
  },
  created() {
    this.getAllRole(); //获取全部角色
    this.getAllPermission(); //获取权限列表
  },
  computed: {
    ...mapGetters(["companyId"]), //公司id
  },
  methods: {
    //角色管理 公司信息 却换el-tabs标签
    handleClick(tab) {
      const { index } = tab;
      if (index == 1 && !this.companyInfo.name) {
        this.getCompany(); // 获取公司信息
      }
    },
    //获取全部角色
    async getAllRole() {
      
      const { data } = await getAllRoleAPI(this.query);
      this.tableData = data.rows;
      this.total = data.total;
  
      
    },
    //新增角色
    handlerAdd() {
      this.title = "新增角色";
      this.showRoleDialog = true;
    },
    // 编辑角色
    handleEdit(data) {
      this.title = "编辑角色";
      this.showRoleDialog = true;
      this.$refs.roleFormRef.form = { ...data };
    },
    //删除角色
    handleDelete(data) {
      this.$confirm(`删除${data.name}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deleteRoleAPI(data.id);
          msgTip({ msg: res.message });
          if (this.tableData.length === 1) {
            this.query.page--;
          }
          this.getAllRole(); //刷新角色信息
        })
        .catch(() => {});
    },
    //新增角色
    handleAdd() {
      this.title = "新增角色";
      this.showRoleDialog = true;
      this.apiType = "add";
    },
    // 获取公司信息
    async getCompany() {
      const { data } = await getCompanyDetailsAPI(this.companyId);

      this.companyInfo = data;
    },

    //提交角色表单
    async handlerSubmit(form) {
      if (!form.id) {
        //新增角色API
        const res = await createRoleAPI(form);
        msgTip({ msg: res.message });
        this.$refs.roleFormRef.closeDialog();
        this.getAllRole(); //刷新角色信息
      } else {
        //更新角色API
        const res = await updateRoleAPI(form);
        this.$refs.roleFormRef.closeDialog();
        msgTip({ msg: res.message });
        this.getAllRole(); //刷新角色信息
      }
    },
    //分页页数改变
    handleCurrentChange(page) {
      this.query.page = page;
      this.getAllRole();
    },
    //页面条数改变
    handleSizeChange(pagesize) {
      this.query.pagesize = pagesize;
      this.getAllRole();
    },
    //获取权限列表
    async getAllPermission() {
      const { data } = await getAllPermissionAPI();
      this.permission = tranTree(data);
    },
    //分配权限
    async handlerAssignPermission({ id }) {
      this.roleId=id
      const {
        data: { permIds },
      } = await getRoleDetailsAPI(id);
      this.selectCheck = permIds;
      this.showAssign = true;
    },
    //分配权限==网络请求
   async handlerSubmitPer(data) {
   const res= await assignPermissionsAPI({id:this.roleId,permIds:data})
   msgTip({msg:res.message})
   this.showAssign=false
    },
  },
  components: {
    CompanyDetail,
    RoleForm,
    AssginPermission,
  },
};
</script>

<style >
.add-btn {
  margin-bottom: 10px;
}
.page {
  margin-top: 10px;
}
</style>